<template>
  <div style="height: 100%;">
 
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>
		
    <div v-show="isShowCar">
		<div class="container bgd_color_gray">
      <div  v-for="item in goodInfo">
  			<div class="pad_lr26 overflow_hide f_size24 f_color_gray0 bgd_color_white border_bot2">
  				<div class="left line_height62">
  					浓答商城
  				</div>
  				<div  @click="editBtnClick" v-show="goods_wrap_show" class="js_edite_btn right line_height62 pad_lr10">
  					编辑
  				</div>
          <div @click="wanBtnClick(item.price)" v-show="edit_wrap_show" class="js_edite_btn right line_height62 pad_lr10">
  					完成
  				</div>
  			</div>

  			<div  class="good_li_wrap bgd_color_white border_bot1">
  				<div class="left">
            <div @click="per_checked_click" class="circle_btn_wrap">
              <input v-bind:checked="per_checked" type="checkbox" />
              <div class="circle_btn">
              </div>
            </div>
  				</div>
  				<div class="left pad_lr15">
  					<img class="pic_h_w114" :src="src+item.pic" />
  				</div>
  				<div v-show="goods_wrap_show" class="left product_descript_wrap f_size22">
  					<div class="product_descript">
  						{{item.goodsName}}
  					</div>
  					<div class="product_size f_color_gray0">
  						{{item.standard}}
  					</div>
  					<div class="product_price f_color_gray0">
  						￥{{item.price}}
  					</div>
  					<div class="product_num f_color_gray0">
  						&times;{{goodsNums}}
  					</div>
  				</div>
  				<div v-show="edit_wrap_show" class="left product_edite_wrap f_size22">
  					<div class="product_edite_inner_wrap">
  						<div class="product_num_editer">
  							<span @click="reduce_nums" class="reduce_nums">&minus;</span>
  							<input @change="num_input_change" v-model="goodsNums" type="" name="" id="" value="" />
  							<span @click="add_nums" class="add_nums">+</span>
  						</div>
  						<div class="product_size f_color_gray0">
  							{{item.standard}}
  						</div>
  						<div class="product_price f_color_gray0">
  							￥{{item.price}}
  						</div>
  						<div class="product_num f_color_gray0">
  							<img @click="deleteGoods(item.cartId)" src="../static/images/delete_icon.png" />
  						</div>
  					</div>
  				</div>
  			</div>
      </div>
      </div>
			<div class="settle_money_wrap">
				<div @click="all_checked_click" class="left">
          <div class="circle_btn_wrap">
            <input v-bind:checked="all_checked" type="checkbox" />
            <div class="circle_btn">
            </div>
          </div>
				</div>
				<div class="left f_size24 pad_lr10">
					全选
				</div>
  			<div @click="settleClick" class="right f_size26 settle_money_btn bgd_color">
  				结算
  			</div>
				<div class="right f_size24 pad_lr10 f_color2">
					￥{{all_money}}
				</div>
				<div class="right f_size24">
					合计：
				</div>
			</div>
		</div>
    <div v-show="isShow">
      <div  class="container bgd_color_gray">
  			<div class="empty_car_wrap text_center">
  				<img src="../static/images/empty_car_icon.png"/>
  				<p class="f_size22 f_color_gray0">您没有添加任何商品！</p>
          <router-link to="/">
  				    <button class="pad_lr26 f_size22">返回商城</button>
          </router-link>
  			</div>
  		</div>
    </div>
  </div>
</template>

<script>
  export default {
    created () {
      this.$api.get('/front/carts', null, r => {
        console.log('购物车1r',r)
        console.log('r.list', r.list)
        if(r.data.list.length === 0) {
          this.isShow = true
          this.isShowCar = false
        }else {
          this.goodInfo = r.data.list
          this.isShow = false
          this.isShowCar = true
        }

        this.goodId = r.data.list[0].goodsId
        this.price = r.data.list[0].price
        this.goodsNums = r.data.list[0].goodsNum
      })
    },
    data () {
      return {
      	leftText: '',
				headerText: '购物车',
        isShow: false,
        isShowCar: true,
        goodInfo: [],
        per_checked: false,
        all_checked: false,
        src: this.$src,
        goodId: 1,
        goodsNums: 1,
        edit_wrap_show: false,
        goods_wrap_show: true,
        all_money: 0,
        price: 0
      }
    },
    methods: {
      settleClick: function () {
        if(this.per_checked === true){
          this.$router.replace({ path: '/settle', query: {goodsId: this.goodId, nums: this.goodsNums}})
        } else {
          Toast('未选择商品！');
        }
      },
      editBtnClick: function () {
        this.edit_wrap_show = true
        this.goods_wrap_show = false
      },
      wanBtnClick: function (price) {
        this.edit_wrap_show = false
        this.goods_wrap_show = true
        if(this.per_checked === true){
          this.all_money = this.goodsNums*this.price
        }
      },
      deleteGoods: function (cartId) {
      var self = this
        this.$api.post('/front/carts/deletes', {ids: [cartId]}, r => {
          console.log('删除成功r', r)
          Toast(r)
          self.$router.go(0)
        })
      },
      per_checked_click: function () {
        if (this.per_checked === true) {
          this.per_checked = false
          this.all_checked = false
          this.all_money = 0
        } else {
          this.per_checked = true
          this.all_checked = true
          this.all_money = this.price*this.goodsNums
        }
      },
      all_checked_click: function () {
        if (this.all_checked === true) {
            this.per_checked = false
            this.all_checked = false
            this.all_money = 0
        } else {
          this.per_checked = true
          this.all_checked = true
          this.all_money = this.price*this.goodsNums
        }
      },
      reduce_nums: function () {
        this.goodsNums--
        if(this.goodsNums < 1) {
          this.goodsNums = 1
        }
      },
      add_nums: function () {
        this.goodsNums++
      },
      num_input_change: function () {
        this.goodsNums = parseInt(this.goodsNums)
        if(typeof(this.goodsNums) != 'number' || this.goodsNums < 1) {
          this.goodsNums = 1
        }
      }
    },
    watch: {
      per_checked: {
        handler: function (curVal, oldVal){
          console.log('curVal', curVal)
          console.log('oldVal', oldVal)
          if(curVal === true){
            console.log('this.all_money',this.all_money)
            this.all_money = this.goodsNums*this.price
            console.log('this.goodsNums', this.goodsNums)
            console.log('this.price', this.price)

          }

        }
      }
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
body{
  height: 100%;
}
</style>
